<template>
	<van-nav-bar title="Moto商城" />
	<view class="shop-page">
		<!-- 搜索框 -->
		<van-search v-model="inp" shape="round" background="#7232DD" placeholder="请输入搜索关键词" @search="onSearch"
			:clearable='false' />
		<!-- 广告轮播图 -->
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item v-for="v in swipeList" @click="followUp">
				<image :src="v" mode="scaleToFill"></image>
			</van-swipe-item>
		</van-swipe>
		<!-- 热销模块 -->
		<view class="shop-item-list">
			<view v-for="v in shop_itemList " @click="followUp">
				<image :src="v.img" mode="widthFix"></image>
				<text> {{v.title}} </text>
			</view>
		</view>
		<!-- 限时秒杀 -->
		<view class="seckill_list">
			<!-- 秒杀时间  -->
			<view class="seckill_time">
				<text>限时 · 秒杀</text>
				<van-count-down :time="time" format="HH:mm:ss:SS" millisecond>
					<template #default="timeData">
						<span class="block">{{ timeData.hours }}</span>
						<span class="colon">:</span>
						<span class="block">{{ timeData.minutes }}</span>
						<span class="colon">:</span>
						<span class="block">{{ timeData.seconds }}</span>
						<span class="colon">:</span>
						<span class="block">{{ String(timeData.milliseconds).slice(0,2) }}</span>
					</template>
				</van-count-down>
			</view>
			<!-- 秒杀商品 -->
			<view class="seckill_goods">
				<view v-for="v in seckill_list" @click="followUp">
					<image :src="v.img" mode="widthFix"></image>
					<text>￥ {{v.price}}</text>
				</view>
			</view>
		</view>
		<h3 class="recommend">为你推荐 -- 假数据版本</h3>
		<!-- 商品列表 -->
		<view class="shop_goods">
			<view class="shop_good" v-for="v in good_list" :id="v.id" @click="followUp">
				<image :src="v.img" mode="widthFix"></image>
				<van-text-ellipsis :content="v.title" />
				<view class="good_msg">
					<view class="price">
						<text>￥</text> <text class="price-num">{{v.price}}</text>
					</view>
					<view class="pay-count">
						{{v.count}} 人付款
					</view>
				</view>


			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'

	import {
		showToast
	} from 'vant'

	import $api from '../../request/index.js'
	import {
		ref
	} from 'vue'

	// 搜索关键词
	let inp = ref('')
	// 秒杀事件
	let time = 30000000
	// 轮播图
	let swipeList = ref([])
	// 商品热门分类列表
	let shop_itemList = ref([])
	// 秒杀列表
	let seckill_list = ref([])
	// 商品列表
	let good_list = ref([])

	onShow(() => {
		$api.get('/shop/swipe').then(res => swipeList.value = res.data)
		$api.get('/shop/itemList').then(res => shop_itemList.value = res.data)
		$api.get('/shop/seckill/list').then(res => seckill_list.value = res.data)
		$api.get('/shop/goods').then(res => {
			console.log(res)
			good_list.value = res.data
		})
	})

	// 搜索结果
	const onSearch = (e) => console.log(e)

	const followUp = () => showToast('暂未开发，敬请期待')
</script>

<style>
	.shop-page {
		height: calc(100vh - 96px);
		overflow-y: scroll;
		background-color: #F0F2F5;
	}

	/* 轮播图 */
	.my-swipe {
		width: 90%;
		margin: 20rpx auto;
		border-radius: 40rpx;
	}

	.my-swipe image {
		width: 100%;
		height: 280rpx;
	}

	/* 商城功能模块  */
	.shop-item-list {
		display: flex;
		font-size: 14px;
		justify-content: space-evenly;
		padding: 20rpx 0;
	}

	.shop-item-list>view {
		display: flex;
		flex-direction: column;
	}

	.shop-item-list image {
		width: 100rpx;
		margin-bottom: 10rpx;
	}

	/* 限时秒杀 */
	.seckill_time {
		padding: 10rpx 0;
		display: flex;
		font-size: 40rpx;
		font-weight: bolder;
		align-items: center;
		color: #fff;
		background-color: orangered;
		border-radius: 30rpx;
		justify-content: center;
		margin: auto;
	}

	.seckill_time>text {
		margin: 0 20rpx;
		color: color;
	}

	.colon {
		display: inline-block;
		margin: 0 4px;
		color: #fff;
	}

	.block {
		display: inline-block;
		width: 22px;
		color: #fff;
		font-size: 12px;
		text-align: center;
		background-color: #7232DD;
	}

	.seckill_goods {
		display: flex;
		overflow-x: scroll;
		padding: 40rpx 20rpx;

	}

	.seckill_goods>view {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 40rpx;
		margin-right: 20rpx;
		padding: 10rpx;
	}

	.seckill_goods image {
		width: 240rpx;
		border-radius: 40rpx;
	}

	.seckill_goods text {
		text-align: center;
		padding: 30rpx 0;
		font-size: 40rpx;
		color: red;
	}

	.recommend {
		padding: 10rpx 20rpx;
		color: #7232dd;
	}

	/* 商品列表 */
	.shop_goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.shop_good {
		width: 40%;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.shop_good>image {
		display: inline-block;
		width: 100%;
	}

	.good_msg {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.price {
		color: orangered;

	}

	.price>.price-num {
		font-size: 40rpx;
	}

	.pay-count {
		font-size: 12px;
		color: #808080;
	}
</style>